<div class='content'>
  <app-loading *ngIf="depthLines.length === 0"></app-loading>
  <table class='depth-header' *ngIf="depthLines.length !== 0">
    <tr>
      <th>Broker</th>
      <th>Ask Vol</th>
      <th>Price</th>
      <th>Bid Vol</th>
      <th>Broker</th> 
    </tr>
  </table>
  <div class='depth-body' *ngIf="depthLines.length !== 0" #depthBody>
    <table class='depth-body'>
      <tr *ngFor="let depthLine of depthLines">
        <td>
          <app-depth-broker-cell [brokerCells]="depthLine.askBrokerCells" [isBest]="depthLine.isBestAsk"></app-depth-broker-cell>
        </td>
        <td>
          <app-depth-size-cell [side]="'ask'" [sizeCells]="depthLine.askSizeCells" [isBest]="depthLine.isBestAsk"></app-depth-size-cell>
        </td>
        <td>
          <app-depth-price-cell [priceCell]="depthLine.priceCell" [isBest]="depthLine.isBestAsk || depthLine.isBestBid"></app-depth-price-cell>
        </td>
        <td>
          <app-depth-size-cell [side]="'bid'" [sizeCells]="depthLine.bidSizeCells" [isBest]="depthLine.isBestBid"></app-depth-size-cell>
        </td>
        <td>
          <app-depth-broker-cell [brokerCells]="depthLine.bidBrokerCells" [isBest]="depthLine.isBestBid"></app-depth-broker-cell>
        </td>
      </tr>
    </table>
  </div>
</div>